<template>
    <!-- author：sunnyLiu
         date: 2017-12-8 -->
    <!--  该组件主要封装表格：其中包含操作和多选
        html上的引用如下：
       <jn-tablemanage 
          :tableData="userData" 
          :tableConfig="tableConfig" 
          :pagiData="pagiData"
          v-on:handleClick="handleClick"
          v-on:selectionChange="selectionChange"
          v-on:handlePageChange="pageChange" 
          v-on:handleSizeChange="handleSizeChange">
          </jn-tablemanage>
       配置项的传入如下
       ***table的配置项
        tableConfig: {
          ***高度配置项
          heightConfig:600,
          ***操作选项的宽度
          handleWidth:200,
          ***ifSelected是否可多选 必传
          ifSelected:true,
          ***ifIndex是否可多选 必传
          ifIndex:true,
          ***ifHandle是否有操作项 必传
          ifHandle:true,
          ***ifPagination是否需要分页栏 必传
          ifPagination:true,
          ***titleData: 表头的值 prop：指当列在userData的key; label:指当列的表头的值；width:当列的宽 必传
          titleData:[ {
            prop: 'date',
            label: '日期',
            width: '180'
          }, {
            prop: 'name',
            label: '姓名',
            width: '180',
          }, {
            prop: 'address',
            label: '地址',
          }],
          ***handleData: 有操作按钮的需要传入的值；当ifHandle为true时必传
          ***key：该按钮的代表值,用来区分点击了哪个按钮；
          ***btnName:该按钮的显示值；
          ***btnIcon:该按钮的icon的class
          handleData: [ {
            key: 'del',
            btnName: '删除',
            btnIcon: 'el-icon-delete',
          }, {
            key: 'modify',
            btnName: '编辑',
            btnIcon: 'el-icon-edit',
          }],
        },

        ***分页相关值得传入
        pagiData：{
            currentPage：1当前页
            pageSizes：[10,20,40] 可选的当页条数
            pageSize：10当页条数
            total：20总条数
        }
         -->
    <div>
        <el-table
            ref="table"
            class="tableComponent"
            stripe
            :data="tableData"
            tooltip-effect="dark"
            :height="tableConfig.heightConfig"
            @selection-change="selectionChange">
            <el-table-column
                align="center"
                v-if="tableConfig.ifSelected"
                type="selection"
                width="60">
            </el-table-column>
            <el-table-column
                align="center"
                v-if="tableConfig.ifIndex"
                label="序号"
                type="index"
                width="60">
            </el-table-column>
            <el-table-column
                align="center"
                v-for="title in tableConfig.titleData" 
                :key="title.prop" 
                :prop="title.prop"
                :label="title.label"
                :width="title.width">
            </el-table-column>
            <el-table-column
                align="center"
                v-if="tableConfig.ifHandle"
                label="操作"
                :width="tableConfig.handleWidth">
                <template slot-scope="scope">
                    <el-button 
                    v-if="handle.btn"
                    v-for="handle in tableConfig.handleData" 
                    :key="handle.btnName"
                    @click="handleClick(tableData[scope.$index], handle.key)"
                    type="text" 
                    size="small">
                    <i :class="handle.btnIcon"></i>{{handle.btnName}}
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="pagi">
            <el-pagination
                    v-if="tableConfig.ifPagination"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="pagiData.currentPage"
                    :page-sizes="pagiData.pageSizes"
                    :page-size="pagiData.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="pagiData.total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
export default {
  name: "jn-tablemanage",
  data() {
    return {
    };
  },
  props: ["tableData", "tableConfig", "pagiData"],
  methods: {
    // 当点操作按钮时 返回当前行的所有属性，以及按钮的key
    handleClick(data, key) {
      this.$emit("handleClick", data, key);
    },

    //当有选择按钮时返回的所有选中的行的属性
    selectionChange(val) {
      this.$emit("selectionChange", val);
    },
    //分页
    handleSizeChange(size) {
      this.$emit("handleSizeChange", size);
    },
    handleCurrentChange(val) {
      this.$emit("handlePageChange", val);
    }
  }
};
</script>
<style scoped>
.tableComponent {
  overflow-y: auto;
}
.pagi {
  text-align: center;
}
</style>